<template>
  <div class="container box flex" @click="handleClick(data)">
    <div class="container-left">
      <img
        v-if="data.event_type[0] == '300'"
        :src="require('@/assets/images/icon2.png')"
        alt=""
      />
      <img
        v-if="data.event_type[0] == '100'"
        :src="require('@/assets/images/icon1.png')"
        alt=""
      />
      <img
        v-if="data.event_type[0] == '200'"
        :src="require('@/assets/images/icon3.png')"
        alt=""
      />
      <img
        v-if="data.event_type[0] == '400'"
        :src="require('@/assets/images/icon4.png')"
        alt=""
      />
    </div>
    <div class="container-center">
      <el-row>
        <el-col :span="24" class="flex">
          <div class="title">
            <span>{{ data.metrics_name }}</span>
            <span
              class="box-radius box-red"
              :class="
                data.levelCode == '0'
                  ? 'box-red'
                  : data.levelCode == '1'
                  ? 'box-yellow'
                  : data.levelCode == '2'
                  ? 'box-blue'
                  : 'box-common'
              "
              >{{
                data.levelCode == "0"
                  ? "特别重大"
                  : data.levelCode == "1"
                  ? "重大"
                  : data.levelCode == "2"
                  ? "较大"
                  : "一般"
              }}</span
            >
          </div>
          <div class="time">
            <span class="time">{{ data.formatTime }}</span>
            <span class="box-radius box-blue">{{
              data.disposal_status == 0
                ? "未处置"
                : data.disposal_status == "1"
                ? "已处置"
                : "处置中"
            }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="description" :span="24"
          ><span>事件详情：</span>{{ data.description }}</el-col
        >
      </el-row>
      <el-row>
        <template v-for="(i, index) in data.assetData">
          <el-col class="flex" :span="24">
            <span>{{ i.label }}({{ i.count }})：</span>
            <span
              v-if="i.count > 0"
              class="text-ellipsis"
              style="margin: 0 5px"
              v-for="ii in i.value"
              >{{ ii == "null" || i == "null" ? "-" : ii }}</span
            >
            <span v-if="i.count == 0">-</span>
          </el-col>
        </template>
        <el-col :span="24" style="margin-top:-1rem;">
          <div class="arrow">
            <el-button type="text">详情</el-button
            ><i class="el-icon-arrow-right"></i>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClick(data) {
      this.$emit("handleClick", data.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 1rem;
  padding: 0.6rem;
  cursor: pointer;

  .container-left {
    width: 10%;
    img {
      width: 5rem;
      height: 5rem;
    }
  }
  .container-center {
    flex: 1;
    text-align: left;
    line-height: 2em;
    .title {
      flex: 1;
      span {
        margin-right: 0.5rem;
      }
    }
    .time {
      span {
        margin-right: 0.5rem;
      }
    }
    .arrow {
    text-align:right;
      .el-icon-arrow-right {
        margin-left: 0.5rem;
      }
    }
  }
  .text-ellipsis {
    display: inline-block;
    overflow: hidden; //溢出隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //..
  }
}
.description {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 这里是超出几行省略 */
}
</style>
